.ui-loading-wrap {
  position: relative;
}


// 加载动画
.ui-loading,
.ui-loading:after,
.ui-loading:before {
  width:4px;
  height:4px;
  background: $tone;
}
.ui-loading {
  padding:0!important;
  opacity:1;
  -webkit-animation-delay:.6s;
  animation-delay:.6s;
  position: absolute;
  top: 50%;
  margin: -2px 0 0 -3px;
  left: 50%;
}
.ui-loading:after,
.ui-loading:before {
  content:"";
  position:absolute
}
.ui-loading:after {
  margin-right:auto;
  left:-7px;
  -webkit-animation-delay:.3s;
  animation-delay:.3s;
}
.ui-loading:before {
  margin-right:auto;
  left:7px;
  -webkit-animation-delay:.9s;
  animation-delay:.9s;
}

// 标准的loading HTML结构
// <div class="load-more [loading]"><span class="loading-tip">加载更多</span><i class="ui-loading"></i></div>
.loading {
  > .ui-loading,
  > .ui-loading:after,
  > .ui-loading:before {
    //display: block;
    -webkit-animation:ui-loading .8s infinite linear;
    animation:ui-loading .8s infinite linear;
  }
  > .ui-loading:after {
    -webkit-animation-delay:.3s;
    animation-delay:.3s;
  }
  > .ui-loading:before {
    -webkit-animation-delay:.9s;
    animation-delay:.9s;
  }
}

// .loading > .loading-tip{
//   visibility: hidden;
// }

@-webkit-keyframes ui-loading {
  0%,100% {
    opacity:.1
  }
  30% {
    opacity:1
  }
}

@keyframes ui-loading {
  0%,100% {
    opacity:.1
  }
  30% {
    opacity:1
  }
}